<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>

	
		<div class="canvasImagesd"
			style="margin: 0 auto;width: 300px;height: 400px;position: fixed;z-index: 9999;background-color: #ededed;display: none;">
			<canvas id="canvas" style="width: 100%;height: 100%;"></canvas>
		</div>
		<div>
			<img id="img" style="width: 300px;height: 400px; display:block; margin: 0 auto;" src="#" alt="...">
		</div>
	</body>
	<script>
		function draw() {
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext("2d");
			var imgBg = new Image();
			imgBg.src = 'img/3a960fac7a0042fbb190a58982d38edd.png'
			window.onload = function() {
				//                  	设置背景色
				ctx.fillStyle = "#ededed";
				ctx.fillRect(0, 0, 300, 400);
				//文字字体和颜色
				ctx.fillStyle = "#000000";
				ctx.font = "20px";
				ctx.drawImage(imgBg, 130, 50);
				ctx.fillText("canvas生成图片测试", 100, 30);
				ctx.fillText("长按保存到手机", 120, 120);
				//生成的data的路径,可以通过php生成图片存到数据库,单存data路径不合适,高清图片情况下会出现图片的残缺
				var srccc = canvas.toDataURL("image/png");
				$("#img").attr("src", srccc);
			}
		}

		draw();
	</script>
</html>